<template>
    <div class="list_big">
        <img class="videoCover" :src="item.Video.videoCover">
        <div class="list_btm">
            <div class="touxiang">
                <div class="touxiang_left">
                    <img
                        :src="'http://43.138.15.137:3000' + (!item.Video.userAvatar ? '/assets/avatar/default.png' : item.Video.userAvatar)">
                    <div class="user_id"> {{ item.Video.userNickname ? item.Video.userNickname : '匿名' }}</div>
                </div>
                <div class="touxiang_right">
                    <div class="aixin">
                        <love />
                    </div>
                    <div class="lovenum">{{ item.WSLCNum.likeNum  }}</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { defineAsyncComponent } from 'vue';
const love = defineAsyncComponent(() => import('../common/little_love.vue'))
const prop = defineProps(
    {
        item: {
            type: Object,
        },
    }
)
</script>
<style lang="scss" scoped>
@function r($v) {
    @return $v / (390 / 10rem)
}

.lovenum {
    margin-left: r(10);
    font-size: r(12);
    color: #fff;
}

.list_big {
    height: r(390);
    width: 48%;
    margin-bottom: r(5);
    position: relative;

    .list_btm {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: r(5);

        .touxiang {
            display: flex;
            justify-content: space-between;
            height: r(25);

            .touxiang_right {
                display: flex;
                align-items: center;

                .aixin {
                    width: r(8);
                    height: r(8);
                }
            }

            .touxiang_left {
                display: flex;
                align-items: center;

                .user_id {
                    font-size: r(12);
                    color: #fff;
                }

                img {
                    border-radius: 50%;
                    width: r(25);
                    height: r(25);
                    margin-right: r(5);
                }
            }
        }

    }

    .videoCover {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
}
</style>